<template>
  <div>
    <ButtonGroup>
      <Button type='primary' @click='modal=true'>添加评论</Button>
      <Button type='error' @click='removeMore'>删除多个评论</Button>
    </ButtonGroup>
    <Input v-model='data.title'>
      <Button slot="append" icon="ios-search" @click="search">搜索</Button>
    </Input>
    <Modal 
    v-model='modal'
    title='数据信息'
    @on-ok='ok'
    @on-cancel='cancel'>
    <Form ref='formValidate' :model='formValidate' :rules='ruleValidate'>
      <FormItem label='Title' prop='title'>
        <Input v-model='formValidate.title' placeholder='Enter your title'> </Input>
      </FormItem>
       <FormItem label='content' prop='titlecontent'>
        <Input v-model='formValidate.content' placeholder='请输入内容'> </Input>
      </FormItem>
       <FormItem label='author' prop='author'>
        <Input v-model='formValidate.author' placeholder='作者'> </Input>
      </FormItem>
        <FormItem>
           <Button type='primary' @click="handleSubmit('formValidate')">submit</Button>
            <Button type='ghost' @click="handleReset('formValidate')" style="margin-left:8px">添加</Button>
      </FormItem>
    </Form>
    </Modal>
      <Modal 
      v-model='modal2'
      title='更新页面'
      @on-ok='ok'
      @on-cancel='cancel'>
      <Form ref='list[num]' :model='list[num]' >
        <FormItem> 
          <Input v-model='list[num].title'> </Input>
        </FormItem>
         <FormItem label='content' >
          <Input v-model='list[num].content' placeholder='请输入内容'> </Input>
        </FormItem>
         <FormItem label='author'>
          <Input v-model='list[num].author' placeholder='作者'> </Input>
        </FormItem>
          <FormItem>
             <Button type='primary' @click="updata(list[num])">更新</Button>
              <Button type='ghost' @click="handleReset(list[num])" style="margin-left:8px">重置</Button>
        </FormItem>
      </Form>
      </Modal>
<!-- 增加点击事件 -->
      <Tree :data="treeData" @on-select-change="onSelectChange"></Tree>

      <Table border :columns='columns' :data='list' @on-selection-change='checkMore' ></Table>
      <Page :total='data.total'
      @on-change='onChangePage'
      @on-page-size-change='onPageSizeChange'
      size='small' show-elevator show-sizer></Page>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        formValidate:{
          title:'',
          cateId:0
        },
        ruleValidate:{
          title:[
            {required:true,message:'The title can not be empty'}
          ]
        },
        modal:false,
          modal2:false,
          treeData:[],
          num:0,
          params:{},
      
        columns: [
                    {
                      type:'selection',
                      width:60,
                      align:'center'
                    },
                    {
                        title: 'Title',
                        key: 'title',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                         title: 'content',
                        key: 'content',
                    },
                     {
                         title: 'author',
                        key: 'author',
                    },
                   
                    {
                        title: 'Action',
                        key: 'action',
                  
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params)
                                        }
                                    }
                                }, '查看'),
                                  h('Button', {
                                      props: {
                                          type: 'success',
                                          size: 'small'
                                      },
                                      style: {
                                          marginRight: '5px'
                                      },
                                      on: {
                                          click: () => {
                                              //this.updated(params)
                                              this.num=params.index
                                              this.modal2=true;
                                          }
                                      }
                                  }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                list:[],
                data:{
                  cateId:0,
                    select:[],
                    title:'',
                    total:0,
                    page:1,
                    limit:10
                }
      }
    },
    created(){
      this.getTree();
      this.getData();
    },
    methods:{
      getTree(){
        this.$http.post(`http://localhost:3000/cate/list/0`)
        .then((response)=>{
          this.treeData=response.data;
        }) 
      },
      getData(){
        this.$http({
          method:'post',
          url:`http://localhost:3000/comment/list`,
          data:this.data
        }).then(res=>{
          this.list=res.data.docs;
          this.data.total=res.data.total;
        })
      },
      show(index){
        this.$Modal.info({
          title:'User Info',
            content: `标题：${index.row.title}<br>内容：${index.row.content}<br>作者：${index.row.author}`
        })
      },
      remove(params){
         this.$Modal.confirm({
          title:'是否确认删除',
          content:`<p>确认删除</p>`,
          onOk:()=>{
            this.$http({
              method:'delete',
              url:`http://localhost:3000/comment/data/${params.row._id}`
            }).then(res=>{
              this.$Message.info('Clicked ok');
              this.getData();
            })
          },
          onCancel:()=>{
            this.$Message.info('Clicked cancel');
          }

        });
      },
         removeMore(){
                this.data.select.forEach((element )=> {
                   this.$http({
                        method:'delete',
                        url:"http://localhost:3000/comment/data/"+element,                       
                    })
                 });
                 this.getData();
            },
            checkMore (selection,row) {               
                 selection.forEach((element,index )=> {
                    this.data.select[index]=element._id
                 });
                 console.log(this.data.select)
            },

      ok(){
        this.$Message.info('Clicked ok');
      },
      cancel(){
        this.$Message.info('Clicked cancel');
      },
      handleSubmit(name){
        this.$refs[name].validate((valid)=>{
          if(valid){
            this.$http({
              method:'post',
              url:'http://localhost:3000/comment/data',
              data:this.formValidate
            }).then(res=>{
              this.$Message.success('Success!');
              // 重置form表单内容微数据初始状态
              Object.assign(this.$data.formValidate,
              this.$options.data().formValidate);
              this.modal=false;
              this.getData();
            })
          }else{
            this.$Message.error('Fail!')
          }
        })
      },
      handleReset(name){
        this.$refs[name].resetFields();
      },
      onChangePage(page){
        this.data.page=page;
        this.$http({
          method:'post',
          url:'http://localhost:3000/comment/list',
          data:this.data
        }).then(res=>{
          this.list=res.data.docs;
          this.data.total=res.data.total;
        })
      },
      onPageSizeChange(pageSize){
        this.data.limit=pageSize;
        this.getData();
      },
      search(){
        this.getData();
      },
      onSelectChange(node){
        console.log(node[0]._id);
        this.data.cateId=node[0]._id;
        this.formValidate.cateId=node[0]._id;
        this.getData();
      },
  updata(data){
          this.$http({
         method: 'put',
          url:`http://localhost:3000/comment/data/${data._id}`,
         data: data
     }).then(res=>{
         console.log(this.list[this.num])
          this.getData();
            this.$Message.info('Clicked ok');
               Object.assign(this.$data.formValidate, 
                 this.$options.data().formValidate);
 }) 
   }
    }
  }

</script>